<template>
  <div class="content-body" :style="borderStyle">
    <!--  模版头  -->
    <default-column-header v-if="showHeader" :temp="temp" />
    <div class="user-content" :style="contentStyle">
      <div class="user-info-half">
        <div class="user-image">
          <el-upload
            v-if="setting.isUpload"
            :action="updateAvatarApi"
            :headers="headers"
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
          >
            <el-image
              class="user-tx"
              :src="
                user.avatarName === null
                  ? baseURL+tx
                  : baseURL + user.avatarName
              "
            />
          </el-upload>
          <el-image
            v-else
            class="user-tx"
            :src="
              user.avatarName === null
                ? baseURL+tx
                : baseURL + user.avatarName
            "
          />
        </div>
        <div class="user-info">
          <div class="user-content-body">
            <div class="info-nickname">
              <label />{{
                dataList.length > 0 ? dataList[0][setting.firstColumn] : ""
              }}
            </div>
            <div class="info-username">
              {{ dataList.length > 0 ? dataList[0][setting.secondColumn] : "" }}
            </div>
            <div class="info-ori">
              <label />{{
                dataList.length > 0 ? dataList[0][setting.thirdColumn] : ""
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="user-info-half">
        <div
          class="info-half-body"
          :style="{
            background: 'url(' + tq + ') no-repeat',
            backgroundSize: '100% 100%'
          }"
        >
          <div class="half-body-line-first">{{ getTime.day }}</div>
          <div class="half-body-line">{{ getTime.date }}</div>
        </div>
      </div>
      <div
        v-for="(item, index) in column"
        :key="'label-' + index"
        class="user-info-line"
      >
        <div
          class="label-li-line"
          @click="openVisitingCard(item)"
        >
          <div class="label-image">
            <el-image :src="baseURL+item.icon" />
          </div>
          <div class="label-title">
            {{ item.label }}
          </div>
          <div class="label-number" :style="headerFontColor">
            <visiting-slot :column="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VisitingSlot from './slot/visitingSlot'
import { mapGetters } from 'vuex'
import setImage from '@/assets/images/user.png'
import { getToken } from '@/utils/auth'
import DefaultColumnHeader from '@/portal4.1/pc/component/column/DefaultColumnHeader.vue'
import { layout } from '@/mixins/layout'
import { getTimes } from '@/utils/utils'
import { template } from '@/mixins/template'
export default {
  name: 'PcVisitingCardV1',
  components: { DefaultColumnHeader, VisitingSlot },
  mixins: [layout, template],
  computed: {
    ...mapGetters(['user', 'updateAvatarApi']),
    getTime() {
      return getTimes()
    },
    user() {
      return this.$store.getters.user
    }
  },
  data() {
    return {
      tx: setImage,
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      ),
      loading: false,
      imageUrl: '',
      headers: {
        APEXEDU: getToken()
      },
      tq: require('@/assets/images/tq.png')
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === 'image/png' ||
        file.type === 'image/jpg' ||
        file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('只能上传png、jpg、jpeg图片!')
      }
      if (!isLt2M) {
        this.$message.error('上传上传图片大小不能超过2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess(res) {
      const user = this.$store.getters.user
      const transUrl = (url) => {
        const idx = url.indexOf('?')
        if (idx === -1) {
          return url + `?t=${Date.now()}`
        } else {
          return url.split('?')[0] + `?t=${Date.now()}`
        }
      }
      user.avatarPath = transUrl(res.url)
      user.avatarName = transUrl(res.url)
      this.$store.commit('SET_USER', user)
    },
    handleAvatarError(err) {
      this.$message.error(err)
    }
  }
}
</script>

<style lang="scss" scoped>
.content-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  padding: 0 0 10px 0;
  box-sizing: border-box;
  overflow: hidden;
}
.user-content {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  padding: 0 20px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
}
.user-image {
  width: 75px;
  flex: 0 1 auto;
  height: 110px;
  position: relative;
  text-align: center;
}
.user-info {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  padding: 0 15px;
  box-sizing: border-box;
}
.user-tx {
  width: 74px;
  height: 102px;
  //top: 50%;
  /* margin-top: 5px; */
  border-radius: 4px;
  //margin-top: -51px;
}
.user-content {
  flex: 1 1 auto;
  text-align: center;
  cursor: pointer;
  /* padding: 5px 0px; */
  box-sizing: border-box;
  width: 100%;
}
.user-info-half {
  width: 50%;
  height: 110px;
  display: flex;
  padding: 0 10px;
  box-sizing: border-box;
  margin-top: 10px;
}
.user-content-body {
  flex: 1 1;
  height: 110px;
  padding: 0px 10px;
  box-sizing: border-box;
}
.info-nickname {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--edu-text-100);
}
.info-username {
  width: 100%;
  height: 30px;
  text-align: left;
  color: var(--edu-text-300);
}
.info-ori {
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
}
.info-half-body {
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
.half-body-line-first {
  margin-top: 20px;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--edu-hover-color-200);
}
.half-body-line {
  margin-top: 25px;
  color: var(--edu-hover-color-200);
}
.user-info-line {
  width: 50%;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  .label-li-line {
    width: 100%;
    border-radius: 4px;
    height: 100%;
    background-color: var(--edu-bk-200);
    line-height: 40px;
    text-align: left;
    display: flex;
    flex-flow: row nowrap;
    color: var(--edu-text-300);
    .label-image {
      width: 40px;
      height: 40px;
      text-align: center;
      padding: 5px;
      box-sizing: border-box;
    }
    .label-title {
      min-width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: left;
      font-size: 0.9rem;
    }
    .label-number {
      flex: 1 1;
      height: 40px;
      line-height: 40px;
      text-align: right;
      padding: 0 5px;
      box-sizing: border-box;
      color: var(--edu-hover-text-100);
      font-weight: 500;
    }
  }
}
.avatar-uploader {
  width: 100%;
  height: 100%;
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
  }
}
</style>
